<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <!-- <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> -->
  <script src="js/flexible_css.js"></script>
  <script src="js/flexible.js"></script>
  <script src="js/jquery.min.js"></script>
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/clipDoll.css">
  <title>Title</title>
</head>
<body>
<!-- content -->
<div class="content">
  <div class="clipDoll-page">
    <!--游戏窗口-->
    <div class="game-box">
      <div class="pr">
        <!--夹子-->
        <div class="clip">
          <div class="pole"></div>
          <div class="footer">
            <div class="footer-left move"></div>
            <div class="footer-right move"></div>
            <div class="footer-center move"></div>
          </div>
          <div class="prize-result"></div>
        </div>
        <!--轮播-->
        <div class="prize-main">
          <ul class="poster-item poster-list">
            <li><div date-id="0" class="prize-img prize0"><img src="img/prize/prize0.png"></div></li>
            <li><div date-id="1" class="prize-img prize1"><img src="img/prize/prize1.png"></div></li>
            <li><div date-id="2" class="prize-img prize2"><img src="img/prize/prize2.png"></div></li>
            <li><div date-id="3" class="prize-img prize3"><img src="img/prize/prize3.png"></div></li>
            <li><div date-id="4" class="prize-img prize4"><img src="img/prize/prize4.png"></div></li>
            <li><div date-id="5" class="prize-img prize5"><img src="img/prize/prize5.png"></div></li>
            <li><div date-id="6" class="prize-img prize6"><img src="img/prize/prize6.png"></div></li>
            <li><div date-id="7" class="prize-img prize7"><img src="img/prize/prize7.png"></div></li>
            <li><div date-id="8" class="prize-img prize8"><img src="img/prize/prize8.png"></div></li>
            <li><div date-id="9" class="prize-img prize9"><img src="img/prize/prize9.png"></div></li>
          </ul>
        </div>
        <div class="prize-main2">
          <ul class="poster-item poster-list2"></ul>
        </div>
      </div>
    </div>
    <div class="prize-list">
      <!--全部奖品展示栏-->
      <div class="prize-box">
        <div class="prize-list-con">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class='swiper-slide'><div class='swiper-img'><img src="img/prize/prize0.png"><p>标题1标题标题标题标题标题标题</p></div></div>
              <div class='swiper-slide'><div class='swiper-img'><img src="img/prize/prize1.png"><p>标题1</p></div></div>
              <div class='swiper-slide'><div class='swiper-img'><img src="img/prize/prize2.png"><p>标题2</p></div></div>
              <div class='swiper-slide'><div class='swiper-img'><img src="img/prize/prize3.png"><p>标题3</p></div></div>
              <div class='swiper-slide'><div class='swiper-img'><img src="img/prize/prize4.png"><p>标题4</p></div></div>
              <div class='swiper-slide'><div class='swiper-img'><img src="img/prize/prize5.png"><p>标题5</p></div></div>
              <div class='swiper-slide'><div class='swiper-img'><img src="img/prize/prize6.png"><p>标题6</p></div></div>
              <div class='swiper-slide'><div class='swiper-img'><img src="img/prize/prize7.png"><p>标题7</p></div></div>
              <div class='swiper-slide'><div class='swiper-img'><img src="img/prize/prize8.png"><p>标题8</p></div></div>
              <div class='swiper-slide'><div class='swiper-img'><img src="img/prize/prize9.png"><p>标题9</p></div></div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    
    <!--规则-->
    <div class="rules-btn"><img src="img/rules-btn.png" alt=""></div>
    <!--我的奖品-->
    <a href="#" class="myawards-btn"><img src="img/myawards-btn.png" alt=""></a>
    <!--剩余次数-->
    <div class="today-nums">今日免费<em></em>次</div>
    <!--开始按钮-->
    <div class="start-btn"><img src="img/go.png" alt=""></div>
    <!--左按钮-->
    <div class="left-btn"><img src="img/left.png" alt=""></div>
    <!--右按钮-->
    <div class="right-btn"><img src="img/right.png" alt=""></div>
    <!--弹窗-->
    <div class="popup suc-popup">
      <div class="popup-con">
        <span class="pop-close"></span>
        <img class="popup-bg suc-bg" src="img/suc-bg.png" alt="">
        <img class="popup-bg rule-bg" src="img/rule-bg.png" alt="">
        <img class="popup-bg failed-bg" src="img/failed.png" alt="">
        <div class="popup-text">
          <div class="popup-tip rule-tip">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, cum dicta dignissimos doloribus hic id, inventore labore nam nostrum reiciendis repellendus veritatis vero voluptates. Consequuntur, dolor, quisquam! Praesentium, quis, rem.</div>
          <div class="popup-tip suc-tip">成功</div>
          <div class="popup-tip failed-tip">挑战失败，<br> 再来尝试一次吧！</div>
          <div class="popup-tip num-tip">今日挑战次数已用完，<br/> 明天再来尝试吧</div>
        </div>
      </div>
    </div>
  </div>

</div>
<!-- content end -->
<!--footer-->
<div class="footer-con">
  <ul class="footer-nav">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>
</div>
<!--footer end-->
<script src="js/swiper.min.js"></script>
<script src="js/clipDoll.js"></script>
<script>
  // 展示列
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    autoplay: 1000,
    slidesPerView: 4,
    autoplayDisableOnInteraction: false,
    loop : true
  });
  $(".swiper-img").css("height",$(".swiper-img").width());
</script>
</body>
</html>